<script setup>
import {onMounted, ref} from 'vue';
import {Plus,Search} from "@element-plus/icons-vue";
import {getReport, getReportList} from '@/apis/report.js';
import handlingReport from '@/views/report/handlingReport.vue'
import {formatTime} from "@/utils/time_common.js";
const options01 = ref([
  {value: '0', label: '虚假商品'},
  {value: '1', label: '侵权商品'},
  {value: '3', label: '其他问题'},
]);
const options02 = ref([
  {value: '0', label: '未处理'},
  {value: '1', label: '已处理'},
]);
const total = ref(0);
const current = ref(1);
const size = ref(10);
const formInline = ref({
  goodsName: '',
  handlerName: '',
  reportStatus: '',
  reportType: '',
});
const tableData = ref([]);
const id = ref('');
const drawer = ref(false)
const reportMsg = ref({})
const init = async () => {
  const params = {
    current: current.value,
    pageSize: size.value,
  };
  await getReportList(params).then(res => {
    if (res.data.code === 1) {
      tableData.value = res.data.data.records;
      total.value = res.data.data.total;
    } else {
      console.log(res.data.msg)
      tableData.value = [];
      total.value = 0;
      ElMessage.error('出错了，请联系管理人员！')
      return false;
    }
  }).catch(
      (err) => {
        console.log(err);
        tableData.value = [];
        total.value = 0;
        ElMessage.error('出错了，请联系管理人员！')
        return false;
      }
  );

};


const findReport = async () => {
  const params02 = {
    handlerName: formInline.value.handlerName ? formInline.value.handlerName : undefined,
    goodsName: formInline.value.goodsName ? formInline.value.goodsName : undefined,
    type: formInline.value.reportType ? formInline.value.reportType : undefined,
    status: formInline.value.reportStatus ? formInline.value.reportStatus : undefined,
  };
  await getReport(params02).then(res => {
    if (res.data.code === 1) {
      console.log(res.data.data.records)
      tableData.value = res.data.data.records
      total.value = res.data.data.total;
    } else {
      console.log(res.data.msg)
      tableData.value = [];
      total.value = 0;
      ElMessage({
        message: res.data.msg,
        type: 'warning'
      })
      return false;
    }
  }).catch(
      (err) => {
        console.log(err);
        tableData.value = [];
        total.value = 0;
        ElMessage('出错了，请稍后重试！')
        return false;
      });
};

function formatCreateTime(row) {
  return formatTime(row.createTime)
}

function formatProcessingTime(row) {
	if(row.processingTime!=null)
  return formatTime(row.processingTime)
}


const openReport = (row) => {
  drawer.value = true;
  reportMsg.value = row;
};

const handleClose = () => {
  // 确认弹窗
  if (reportMsg.value.status === 0) {
    // 未处理的关闭前弹窗提示
    if (confirm('确认不处理？')) {
      drawer.value = false;
    }
  } else {
    // 已处理的直接关闭弹窗
    closeReport()
  }

}
const closeReport = () => {
  drawer.value = false;
}


const currentChange = (val) => {
  current.value = val;
  init()
};

onMounted(() => {
  init();
//   // Assuming you have localStorage available
//   const user = JSON.parse(localStorage.getItem('userInfo')).username;
//   console.log(user);
})

</script>

<template>
  <div id="member-app" class="dashboard-container">
    <div class="container">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="商品名称:">
          <el-input
              v-model="formInline.goodsName"
              clearable
              placeholder="请输入被举报的商品名称"
              style="width: 200px"
          >
            <i
                slot="prefix"
                class="el-input__icon el-icon-search"
                style="cursor: pointer"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item label="处理人:">
          <el-input
              v-model="formInline.handlerName"
              clearable
              placeholder="请输入处理人的用户名"
              style="width: 200px"
          >
            <i
                slot="prefix"
                class="el-input__icon el-icon-search"
                style="cursor: pointer"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item label="举报类型:">
          <el-select v-model="formInline.reportType" clearable placeholder="请选择举报类型">
            <el-option
                v-for="item in options01"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理状态:">
          <el-select v-model="formInline.reportStatus" clearable placeholder="请选择举报状态">
            <el-option
                v-for="item in options02"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button :icon="Search" type="primary" @click="findReport">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" :table-layout="'fixed'" class="tableBox" stripe>
        <el-table-column align="center" label="ID" prop="id"></el-table-column>
        <el-table-column align="center" label="商品名称" prop="goodsName"></el-table-column>
        <el-table-column align="center" label="举报类型" prop="type">
          <template #default="scope">
            {{
              scope.row.type == 0
                  ? '虚假商品'
                  : scope.row.type == 1
                      ? '侵权商品'
                      : '其他问题'
            }}
          </template>
        </el-table-column>
        <el-table-column label="举报原因" prop="reason"></el-table-column>
        <el-table-column :formatter="formatCreateTime" label="举报时间" prop="createTime"></el-table-column>
        <el-table-column :formatter="formatProcessingTime" label="处理时间" prop="processingTime"></el-table-column>
        <el-table-column label="处理状态">
          <template #default="scope">
            {{ scope.row.status === 0 ? '未处理' : '已处理' }}
          </template>
        </el-table-column>
        <el-table-column label="处理人" prop="handlerName"></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="160">
          <template #default="scope">
            <el-button v-if="scope.row.status===0" type="text" @click="openReport(scope.row)">
              处理投诉
            </el-button>
            <el-button v-else type="text" @click="openReport(scope.row)">
              查看处理结果
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-model:current-page="current" :total=total background class="pageList" layout="prev, pager, next"
                     @current-change="currentChange"/>
    </div>
    <el-drawer
        v-model=drawer
        :before-close="handleClose"
        :destroy-on-close=true
        :direction="trl"
        size="50%"
        title="I am the title"
    >
      <handling-report :reportMsg='reportMsg' @closeReport='closeReport'></handling-report>
    </el-drawer>
  </div>
</template>

<style scoped>
@import "@/styles/report.css";
@import "@/styles/page.css";
</style>